<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOTA2神秘商店 - 官方周边商城</title>
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/libs/swiper/swiper.min.css">
    <style>
            .swiper-container{
              min-width: 1264px;
                min-height: 640px;
                cursor: pointer;  
            }
            .swiper-slide img{
                width: 100%;
                height: 100%;

            }
            </style>
    <script src="/libs/swiper/swiper.min.js"></script>
</head>
<body>
    <header></header>
    <!-- 中间主要内容 -->
    <!-- 全屏轮播图 弄成响应式 -->
    <div class="carousel">
        <div class="carousel-wrap">
              <!-- 这是一个轮播图 使用插件 -->
              <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="/images/(1).png" alt="" srcset=""></div>
                        <div class="swiper-slide"><img src="/images/(3).png" alt="" srcset=""></div>
                        <div class="swiper-slide"><img src="/images/(5).png" alt="" srcset=""></div>
                        <div class="swiper-slide"><img src="/images/(6).png" alt="" srcset=""></div>
                        <div class="swiper-slide"><img src="/images/(7).png" alt="" srcset=""></div>
                      
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    
                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    
                    <!-- 如果需要滚动条 -->
                    <div class="swiper-scrollbar"></div>
                </div>
        </div>
       
    </div>
    <!-- 三件单品 广告 -->
    <div class="three">
        <div class="three-wrap">
           <!-- <a href="javascript:;"><div class="three-wrap-one"><img src="/images/f53b938fe3654781ac56657262ea201a.png" alt="" srcset=""></div></a> 
           <a href="javascript:;"><div class="three-wrap-two"></div></a>
           <a href="javascript:;"><div class="three-wrap-three"></div></a>  -->
        </div>
    </div>
    <!-- //模板引擎渲染 -->
    <script type="text/html" id="templatetg">
        {{each list item}}
        <a href="javascript:;"><div class="three-wrap-one"><img src="{{item.src}}"></div></a> 
        {{/each}}
    </script>
    <!-- 新品 -->
    <div class="new">
        <div class="new-wrap">
            <span></span>
            新品首售
        </div>
    </div>
    <div class="threecloth">
    <!-- <a href="javascript:;"><img src="" ></a>
    <a href="javascript:;"><img src="" ></a>
    <a href="javascript:;"><img src="" ></a> -->
   </div>
   <script type="text/html" id="templateBig">
          {{each list item}}
          <a href="javascript:;"><img src="{{item.img}}" ></a>
          {{/each}}
  </script>
   <!-- 引入footer -->
   <footer></footer>
   <script>
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            speed:300,
            autoplay:true,
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
            },
            
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            
            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          })        
          </script>
        </script>
</body>
<script src="/libs/require/require.min.js" data-main="/js/index.js"></script>
</html>